<template>
  <div class="mine">
    <!-- 顶部 -->
    <div class="top">
      <div class="left" @click="gomessage">
        <img
          src="@/assets/images/我的/消息图标@2x.png"
          alt=""
          v-if="messagedot"
        />
        <img
          src="@/assets/images/樊登讲书/消息图标.png"
          alt=""
          v-else
          class="imgdot"
        />
      </div>
      <div class="right">
        <img
          src="@/assets/images/我的/客服图标@2x.png"
          alt=""
          @click="goserve"
        />
        <img src="@/assets/images/我的/设置图标@2x.png" alt="" />
      </div>
    </div>
    <!-- 用户信息 -->
    <div class="detail">
      <div class="me">
        <div class="profile-photo" @click="goResource">
          <img src="../../assets/images/我的/头像图标@2x.png" alt="" />
        </div>
        <div class="username">
          <p class="name">莉雅kk</p>
          <p @click="goCompile">
            编辑资料<img src="@/assets/images/我的/铅笔@2x.png" alt="" />
          </p>
        </div>
      </div>
      <div class="registration" @click="goSign">
        <img src="@/assets/images/我的/组1@2x.png" alt="" />
        <span>签到有礼</span>
      </div>
    </div>
    <!-- 已购等 -->
    <div class="icon">
      <div class="bought">
        <img src="@/assets/images/我的/已购@2x.png" alt="" />
        <p>已购</p>
      </div>
      <div class="history">
        <img src="@/assets/images/我的/学习历史@2x.png" alt="" />
        <p>学习历史</p>
      </div>
      <div class="collect">
        <img src="@/assets/images/我的/收藏@2x.png" alt="" />
        <p>收藏</p>
      </div>
      <div class="downLoad">
        <img src="@/assets/images/我的/下载@2x.png" alt="" />
        <p>下载</p>
      </div>
    </div>
    <!-- 会员信息 -->
    <div class="vip radius10">
      <div class="msg">
        <p class="type">樊登讲书VIP体验会员</p>
        <p class="time">2021.06.05到期</p>
      </div>
      <div class="btn" @click="govip">立即开通</div>
    </div>
    <!-- 账户 -->
    <div class="count radius10">
      <div class="money">
        <p>0</p>
        <span>账户</span>
      </div>
      <div class="money">
        <p>0</p>
        <span>积分</span>
      </div>
      <div class="money">
        <p>0</p>
        <span>礼品卡</span>
      </div>
      <div class="money">
        <p>0</p>
        <span>优惠券</span>
      </div>
    </div>
    <!-- 每日签到等 -->
    <div class="event radius10">
      <div>
        <div>
          <p>每日签到</p>
          <span
            >连续签到积分递增<img
              src="@/assets/images/我的/矩形12@2x.png"
              alt=""
          /></span>
        </div>
        <img src="@/assets/images/我的/组1@2x(2).png" alt="" />
      </div>
      <div>
        <div>
          <p>邀请好友</p>
          <span
            >邀好友来读书<img src="@/assets/images/我的/矩形12@2x.png" alt=""
          /></span>
        </div>
        <img src="@/assets/images/我的/组1@2x(3).png" alt="" />
      </div>
      <div>
        <div>
          <p>积分商城</p>
          <span
            >积分兑换好物<img src="@/assets/images/我的/矩形12@2x.png" alt=""
          /></span>
        </div>
        <img src="@/assets/images/我的/组1@2x(1).png" alt="" />
      </div>
      <div>
        <div>
          <p>成长福利</p>
          <span
            >每天都可领积分<img src="@/assets/images/我的/矩形12@2x.png" alt=""
          /></span>
        </div>
        <img src="@/assets/images/我的/组1@2x(4).png" alt="" />
      </div>
    </div>
    <!-- 更多 -->
    <div class="more radius10">
      <div>
        <img src="@/assets/images/我的/企读@2x.png" alt="" />
        <span>企读</span>
      </div>
      <div @click="goactivity">
        <img src="@/assets/images/我的/线下书店@2x.png" alt="" />
        <span>线下书店</span>
      </div>
      <div>
        <img src="@/assets/images/我的/联合福利@2x.png" alt="" />
        <span>联合福利</span>
      </div>
      <div>
        <img src="@/assets/images/我的/我的书童@2x.png" alt="" />
        <span>我的书童</span>
      </div>
    </div>
    <!-- 底部提示 -->
    <div class="tip">
      <img src="@/assets/images/我的/小鸡纸@2x.png" alt="" />
      <p>已经到底啦！</p>
      <p>“还有很多地方等你探索哟”</p>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
export default {
  setup() {
    const router = useRouter();
    const messagedot = ref(false);
    const goSign = () => {
      router.push("/sign");
    };
    const goCompile = () => {
      router.push("/compile");
    };
    const goResource = () => {
      router.push("/resource");
    };
    const gomessage = () => {
      router.push("/information");
    };
    const goserve = () => {
      router.push("/service");
    };
    const govip = () => {
      router.push("/vip");
    };
    const goactivity = () => {
      router.push("/Offlinebookstore");
    };
    const istrue = () => {
      if (localStorage.getItem("information") === "0") {
        messagedot.value = true;
      }
    };
    onMounted(() => {
      istrue();
    });
    return {
      goCompile,
      goResource,
      gomessage,
      goserve,
      govip,
      goactivity,
      messagedot,
      goSign,
    };
  },
};
</script>

<style lang="less" scoped>
.radius10 {
  border-radius: 10px;
}
p {
  margin: 5px;
}
.mine {
  font-size: 12px;
  line-height: 18px;
  padding: 10px;
  position: relative;
  font-weight: bold;
  color: #040404;
  font-family: PingFang SC;
  background-color: rgb(246, 247, 249);
  .top {
    margin-bottom: 26px;
    margin-top: 10px;
    overflow: hidden;
    img {
      height: 18px;
      margin-left: 10px;
    }
    display: flex;
    justify-content: space-between;
    .imgdot {
      position: absolute;
      top: 14px;
      left: 0px;
      height: 24px;
    }
    .right img:first-child {
      margin-right: 5px;
    }
  }
  .detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .me {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .profile-photo {
        width: 62px;
        height: 62px;
        background: url("../../assets/images/我的/xxxx-2@2x.png");
        background-size: 62px 62px;
        img {
          width: 62px;
          height: 62px;
        }
      }
      .username {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p {
          margin-top: 2px;
        }
        .name {
          font-size: 18px;
          color: #040404;
          margin-bottom: 5px;
        }
        img {
          width: 10px;
          height: 9px;
          margin-left: 3px;
        }
      }
    }
    .registration {
      width: 84px;
      height: 26px;
      background-color: #fde351;
      border-radius: 13px 0px 0px 13px;
      margin-right: -10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      span {
        font-size: 11px;
        color: #040404ff;
      }
      img {
        width: 13px;
        height: 13px;
      }
    }
  }
  .icon {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    div {
      text-align: center;
    }
    img {
      width: 24px;
      height: 24px;
    }
    .bought {
      img {
        width: 19px;
        height: 25px;
      }
    }
    .collect {
      img {
        width: 25.5px;
        height: 25px;
      }
    }
  }
  .vip {
    padding: 12px;
    background-color: #605e61;
    border-radius: 10px;
    height: 57px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .msg {
      .type {
        color: #f0d9ad;
        font-size: 14px;
      }
      .time {
        font-size: 12px;
        color: #e1e1e1;
      }
    }
    .btn {
      width: 85px;
      height: 29px;
      line-height: 29px;
      background: #fce4ba;
      border-radius: 14.5px;
      color: #6c5338;
      font-size: 14px;
      text-align: center;
    }
  }
  .count {
    height: 71.5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    margin-bottom: 15px;
    div {
      p {
        color: #060606;
        font-size: 14px;
        line-height: 18px;
        text-align: center;
      }
      span {
        color: #b6b6b6;
        font-size: 12px;
        line-height: 18px;
      }
    }
  }
  .event {
    height: 120px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    > div {
      width: 50%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px;
      box-sizing: border-box;
      border: 1px solid #f6f7f9;
      > img {
        width: 30px;
        height: 30px;
      }
      > div {
        p {
          font-size: 14px;
          color: #151515;
          margin: 0;
        }
        span {
          color: #ea868b;
          font-size: 12px;
          img {
            width: 6px;
            height: 10px;
          }
        }
      }
    }
  }
  .more {
    height: 78px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    > div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      img {
        width: 23px;
        height: 20.5px;
      }
      span {
        font-size: 12px;
      }
    }
  }
  .tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
    img {
      width: 92px;
      height: 59px;
      margin-bottom: 10px;
    }
  }
}
</style>
